import cz from "@/assets/icons/cz.svg";
import Clipboard from "@/assets/icons/Clipboard.svg";
import ar from "@/assets/icons/ar.svg";
import stop from "@/assets/icons/stop.svg";
import edit from "@/assets/icons/edit.svg";
import Group1000002132 from "@/assets/icons/Group1000002132.svg";

export const tableDomData = (data, menu) => {
  let dom = data
    .map((data, key) =>
      data.children
        .map((item, index) => {
          // index
          let Checkbox = `
          <td>
       <label  class="${
         index !== 0 ? "ordersCheckbox dNone" : "ordersCheckbox"
       }">
            <input onclick="getIds(event)" type="checkbox" value=${
              item.ns_order_no
            }  name="hobby"
        }"></input>
             <span class="checkmark"></span>
          </label>
            </td>`;

          // orders
          let Orders = `
           <td>
              <div
              class="${index !== 0 ? "tb-orders dNone" : "tb-orders"}" >  
              <p> 
              <strong
                onclick='onDetailsPage( ${JSON.stringify(item.order_name)})'
              class='detailsPage'>${item.order_name}
                         <img class='tb-copy'
              onclick='onCopy(event,${JSON.stringify(item.order_name)})'
              src="${cz}" alt="" srcset="" />
              </strong>
              </p>
                           <span class="p13777">Amount:</span>
              <strong class='p-22214'>${item.price}</strong>
              <span class="p13">${item.currency}</span>
                <p><span class="p13777">Order time: </span></p>
                <p>${item.created_at_str}</p>
                </div>
            </td>`;

          // store
          let Store = `      
           <td> 
                 <div class="${index !== 0 ? "tb-store dNone" : "tb-store"}" >
              <img src="${Group1000002132}" alt="" srcset="" />
                <p>${item.province}</p>
              </div>
              </td>`;

          // address
          let ShippingAddress = `      
             <td>
                <div class="${
                  index !== 0 ? "tb-address dNone" : "tb-address"
                }" >
                  <p>${item.city}</p>
                  <div class="tb-link"  onclick="onEAditddress(event)">
                  <img src="${Clipboard}" alt="" srcset="" />
                   <p>${item.city}</p>
                  <img src="${ar}" alt=""  
                   srcset="" />
                  <div></div>
                  </div>
              </div>
          </td>`;

          let Product = `      
             <td> 
                  <div class="tb-Product">
                  <img src="${stop}" alt="" srcset="" />
                  <div class="p-text">
                    <p class="p-title">
                  ${item.ns_order_no}
                    </p>
                    <p>
                      <!-- SKU: F3Q225-15ml -->
                      <span class="p13777">SKU：</span>
                      <strong>${index}</strong>
                    ${item.currency} 
                    </p>
                    <p>
                      <span class="p13777">Options：</span>
                      <span class="spanDiv">15ml</span>
                    </p>
                    <p>
                      <span class="p13777">Price：</span>
                   <strong class='${
                     !index ? "fontC777" : ""
                   }'> ${index}</strong>
                    <span class='${!index ? "fontC777" : ""}'   >  ${
            item.currency
          }  </span>
                    </p>
                    <p>
                      <span class="p13777">Quantity：</span>
                      <strong class='p-22214'> ${item.price} </strong>
                    ${item.currency}   
                    </p>
                </div>
              </div>
              </td>`;

          let PaidDate = `<td class='tb-position'> <div class="tb-paidDate" >26 Apr 2020 </div> </td>`;
          let Shipping = ` 
              <td>  
                <div class="tb-shipping">
                <strong class='p-22214'> ${item.price} </strong>
                  ${item.currency}   
                    <img src="${ar}" alt="" srcset=""  class='imgfirstChild' onclick="onEditBlock(event)" />
                            <div class="tb-editAddress">
                              <div class="address">   ${item.price} </div>
                            <img src="${edit}" alt="" srcset="" />
                            </div>
                      </div>
              </td>`;
          let Action = ` <td> 
          <div class="tb-action" >
          <button  class='jsbTb'>Change to fulfill by scaleorder</button>
            </div>
            </td>`;

          let ShippingService = ` 
              <td>  
                <div class="tb-shipping">
                <strong class='p-22214'> ${item.price} </strong>
                  ${item.currency}   
                    <img src="${ar}" alt="" srcset=""  class='imgfirstChild' onclick="onEditBlock(event)" />
                            <div class="tb-editAddress">
                              <div class="address">   ${item.price} </div>
                            </div>
                      </div>
              </td>`;
          let TpyeReason = `
                  <td>  
                <div class="tb-tpyeReason">
                <p class='p13222'><span class='statusType'></span> Refunded</p>
                <p class='p13222'> Removable Cat Sleeping Bag </p>
          
              </td>`;
          let domList = {
            Orders,
            Store,
            ShippingAddress,
            Product,
            PaidDate,
            Shipping,
            Action,
            ShippingService,
            TpyeReason,
          };

          let trDom = `<tr
        onmouseleave="enter()" onmouseenter='over(event,${JSON.stringify(
          item.ns_order_no
        )})'
        >${menu.isCheckbox && Checkbox}${menu.list
            .map((e) => domList[e.key])
            .join("")}</tr>`;

          return trDom;
        })
        .join("")
    )
    .join("");

  return dom;
};

//处理数据格式转换数组
export const fiterArr = (data) => {
  let tableDataArrNew = [];
  for (var i in data) {
    tableDataArrNew.push(...data[i]);
  }
  // let n = 1;
  // tableDataArrNew.forEach((e) => {
  //   e.index = n++;
  //   e.children = [
  //     {
  //       index1: 21,
  //     },
  //   ];
  // });

  // 数组中descrition相同的对象合并成一个children
  let b = [];
  tableDataArrNew.forEach((item, index) => {
    let flag = true;
    b.forEach((item2, index2) => {
      if (item.ns_order_no === item2.ns_order_no) {
        flag = false;
        b[index2].children.push(item);
      }
    });
    if (flag) {
      b.push({
        ns_order_no: item.ns_order_no,
        children: [item],
        x: index,
      });
    }
  });

  return b;
};

export const btDom = (id) => {
  let dom = `<div class="jstable-tb">
  <button onclick='onOrder(${JSON.stringify(
    id
  )})' class='jsbTb'>Place an Order</button>
  <button onclick='onRemove(event)' class='jsbTb'>Remove</button>
</div>`;
  return dom;
};

// bt
export const processingBtDom = (id) => {
  let dom = `<div class="jstable-tb">
  <button onclick='onOrder(${JSON.stringify(
    id
  )})' class='jsbTb'>Open a Dispute</button>
</div>`;
  return dom;
};
